<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery和HTML之单选切换</title>
    <script src="./../lib/jquery-3.7.0.min.js"></script>
</head>
<body>
<div>
    选择图形类型：
    <label for="circle"></label><input type="radio" name="compute" id="circle" checked>circle
    <label for="rectangle"></label><input type="radio" name="compute" id="rectangle">rectangle
    <label for="triangle"></label><input type="radio" name="compute" id="triangle">triangle
</div>
<div id="con">
    <div>
        <label id="content">
            请输入园的半径：
            <input type='text'>
        </label>
    </div>
</div>
<button>工厂模式计算</button>
<button>策略模式计算</button>
<script>
    $(function () {
        /* 选中圆形 */
        $("#circle").click(function () {
            let add = "请输入园的半径：<input type='text'>";
            $("#content").html(add);
        });

        /* 选中矩形 */
        $("#rectangle").click(function () {
            let add = "请输入矩形的宽度：<input type='text'><br>请输入矩形的高度：<input type='text'>"
            $("#content").html(add)
        });

        /* 选中三角形 */
        $("#triangle").click(function () {
            let add = "请输入三角形的第一边：<input type='text'><br>请输入三角形的第二边：<input type='text'><br>请输入三角形的第三边：<input type='text'>"
            $("#content").html(add)
        })
    })
</script>
</body>
</html>